import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Search, Filter, Grid, List, Plus, Download, Share2, Eye, Edit, Trash2, FileText, Image, Video, Music, Archive } from 'lucide-react'
import './ResourceLibrary.css'

const ResourceLibrary = () => {
  const [viewMode, setViewMode] = useState('grid')
  const [searchTerm, setSearchTerm] = useState('')
  const [selectedCategory, setSelectedCategory] = useState('all')
  const [sortBy, setSortBy] = useState('name')

  // 模拟资源数据
  const resources = [
    {
      id: 1,
      title: '智汇宝系统架构文档',
      description: '详细的系统架构设计文档，包含前端、后端、数据库等各个模块的设计说明',
      type: 'document',
      format: 'PDF',
      size: '2.5 MB',
      author: '张三',
      createdAt: '2024-01-15',
      lastModified: '2024-01-20',
      version: 'v2.1',
      category: '技术文档',
      language: '中文',
      pages: 45,
      downloads: 156,
      views: 1234,
      tags: ['架构', '技术文档', '系统设计'],
      thumbnail: '/images/thumbnails/architecture.svg',
      content: '本文档详细描述了智汇宝系统的整体架构设计，包括前端采用React技术栈，后端使用Node.js和Express框架，数据库采用MongoDB进行数据存储。系统采用微服务架构，各模块之间通过RESTful API进行通信。前端实现了响应式设计，支持多种设备访问。后端实现了用户认证、权限管理、资源管理等核心功能模块。'
    },
    {
      id: 2,
      title: '产品设计规范',
      description: 'UI/UX设计规范和组件库，包含颜色、字体、间距等设计标准',
      type: 'image',
      format: 'PNG',
      size: '1.2 MB',
      author: '李四',
      createdAt: '2024-01-10',
      lastModified: '2024-01-18',
      version: 'v1.5',
      category: '设计文档',
      language: '中文',
      downloads: 89,
      views: 567,
      tags: ['设计', 'UI', 'UX', '规范'],
      thumbnail: '/images/thumbnails/design.svg',
      content: '智汇宝产品设计规范定义了统一的视觉语言和交互标准。主色调采用深色主题，背景色为#0f172a，主要文字颜色为#e2e8f0。字体使用Inter和苹果系统字体。组件库包含按钮、输入框、卡片、导航栏等常用组件，所有组件都遵循16:9的屏幕比例设计，适配1920x1080分辨率。间距系统采用8px基准网格。'
    },
    {
      id: 3,
      title: '产品演示视频',
      description: '智汇宝平台功能演示，展示核心功能和使用流程',
      type: 'video',
      format: 'MP4',
      size: '45.6 MB',
      author: '王五',
      createdAt: '2024-01-08',
      lastModified: '2024-01-15',
      version: 'v1.0',
      category: '演示视频',
      language: '中文',
      duration: '5分30秒',
      downloads: 234,
      views: 890,
      tags: ['演示', '视频', '教程'],
      thumbnail: '/images/thumbnails/video.svg',
      content: '本视频全面展示了智汇宝平台的核心功能，包括资源库管理、资源导入、资源详情查看、会议创建和会议记录等功能。视频采用实际操作演示的方式，配合语音讲解，帮助用户快速了解平台的使用方法。视频时长5分30秒，分辨率1920x1080，适合在各种设备上播放。'
    },
    {
      id: 4,
      title: '用户手册',
      description: '详细的使用说明文档，包含所有功能的操作指南',
      type: 'document',
      format: 'PDF',
      size: '3.1 MB',
      author: '赵六',
      createdAt: '2024-01-05',
      lastModified: '2024-01-22',
      version: 'v3.0',
      category: '用户文档',
      language: '中文',
      pages: 68,
      downloads: 178,
      views: 456,
      tags: ['手册', '用户', '教程', '指南'],
      thumbnail: '/images/thumbnails/manual.svg',
      content: '智汇宝用户手册提供了详细的功能说明和操作指南。第一章介绍系统概述和登录方法，第二章讲解资源库的使用，包括资源的导入、分类、搜索和下载。第三章介绍会议功能，包括创建会议、录制会议和查看会议记录。第四章说明系统设置和个性化配置。每个功能都配有详细的步骤说明和截图示例。'
    },
    {
      id: 5,
      title: '品牌Logo素材',
      description: '公司品牌标识和图标，包含多种格式和尺寸',
      type: 'image',
      format: 'SVG',
      size: '0.8 MB',
      author: '孙七',
      createdAt: '2024-01-03',
      lastModified: '2024-01-12',
      version: 'v2.0',
      category: '品牌素材',
      language: '通用',
      downloads: 67,
      views: 234,
      tags: ['品牌', 'Logo', '图标', '素材'],
      thumbnail: '/images/thumbnails/logo.svg',
      content: '智汇宝品牌Logo素材包包含完整的品牌视觉识别系统。主Logo采用渐变色设计，从#667eea到#764ba2，象征智慧和创新。素材包包含SVG、PNG、JPG等多种格式，提供不同尺寸和颜色变体，包括彩色版、白色版、黑色版等。所有素材都经过优化，适合在网页、移动应用、印刷品等多种场景使用。'
    },
    {
      id: 6,
      title: '技术培训音频',
      description: '前端开发技术分享，React和现代前端开发实践',
      type: 'audio',
      format: 'MP3',
      size: '12.3 MB',
      author: '周八',
      createdAt: '2024-01-01',
      lastModified: '2024-01-10',
      version: 'v1.0',
      category: '培训资料',
      language: '中文',
      duration: '25分钟',
      downloads: 45,
      views: 123,
      tags: ['培训', '音频', '前端', 'React'],
      thumbnail: '/images/thumbnails/audio.svg',
      content: '本次技术培训分享了React 19的新特性和现代前端开发最佳实践。内容包括React Hooks的深入使用、状态管理方案选择、性能优化技巧、组件设计模式等。讲师结合智汇宝项目的实际开发经验，分享了在实际项目中遇到的问题和解决方案。音频时长25分钟，适合前端开发人员学习参考。'
    },
    {
      id: 7,
      title: '数据库设计文档',
      description: 'MongoDB数据库结构设计和数据模型说明',
      type: 'document',
      format: 'PDF',
      size: '1.8 MB',
      author: '张三',
      createdAt: '2024-01-25',
      lastModified: '2024-01-28',
      version: 'v1.3',
      category: '技术文档',
      language: '中文',
      pages: 32,
      downloads: 92,
      views: 345,
      tags: ['数据库', 'MongoDB', '设计', '技术'],
      thumbnail: '/images/thumbnails/database.svg',
      content: '智汇宝数据库设计文档详细说明了MongoDB数据库的集合结构和数据模型。主要集合包括users（用户）、resources（资源）、meetings（会议）、tags（标签）等。文档描述了每个集合的字段定义、索引设计、关联关系和查询优化策略。采用文档型数据库的优势在于灵活的数据结构和良好的扩展性。'
    },
    {
      id: 8,
      title: 'API接口文档',
      description: 'RESTful API接口规范和使用说明',
      type: 'document',
      format: 'PDF',
      size: '2.2 MB',
      author: '李四',
      createdAt: '2024-01-20',
      lastModified: '2024-01-26',
      version: 'v2.5',
      category: '技术文档',
      language: '中文',
      pages: 56,
      downloads: 134,
      views: 678,
      tags: ['API', '接口', '技术文档', 'RESTful'],
      thumbnail: '/images/thumbnails/api.svg',
      content: 'API接口文档提供了智汇宝平台所有后端接口的详细说明。包括用户认证接口、资源管理接口、会议管理接口等。每个接口都说明了请求方法、URL路径、请求参数、响应格式和错误码。接口遵循RESTful设计规范，使用JWT进行身份认证，支持跨域请求。文档还包含了接口调用示例和常见问题解答。'
    },
    {
      id: 9,
      title: '移动端适配方案',
      description: '响应式设计和移动端适配的技术方案',
      type: 'document',
      format: 'PDF',
      size: '1.5 MB',
      author: '王五',
      createdAt: '2024-01-18',
      lastModified: '2024-01-24',
      version: 'v1.2',
      category: '技术文档',
      language: '中文',
      pages: 28,
      downloads: 76,
      views: 289,
      tags: ['移动端', '响应式', '适配', '前端'],
      thumbnail: '/images/thumbnails/mobile.svg',
      content: '移动端适配方案文档介绍了智汇宝在不同设备上的适配策略。采用rem单位实现可缩放的布局，通过媒体查询适配不同屏幕尺寸。针对5寸16:9屏幕（1920x1080）进行了专门优化，设置了150%的全局缩放。文档还介绍了触摸交互优化、性能优化和兼容性处理等内容。'
    },
    {
      id: 10,
      title: '安全规范文档',
      description: '系统安全设计和数据保护规范',
      type: 'document',
      format: 'PDF',
      size: '2.0 MB',
      author: '赵六',
      createdAt: '2024-01-12',
      lastModified: '2024-01-19',
      version: 'v1.8',
      category: '技术文档',
      language: '中文',
      pages: 41,
      downloads: 108,
      views: 432,
      tags: ['安全', '规范', '数据保护', '技术'],
      thumbnail: '/images/thumbnails/security.svg',
      content: '安全规范文档定义了智汇宝系统的安全设计原则和实施方案。包括用户认证和授权机制、数据加密传输、敏感信息存储、XSS和CSRF防护、SQL注入防护等安全措施。文档还规定了密码强度要求、会话管理策略、日志审计规范等。所有开发人员必须遵循本规范进行开发，确保系统和用户数据的安全。'
    },
    {
      id: 11,
      title: '性能优化指南',
      description: '前端和后端性能优化的最佳实践',
      type: 'document',
      format: 'PDF',
      size: '1.9 MB',
      author: '孙七',
      createdAt: '2024-01-16',
      lastModified: '2024-01-23',
      version: 'v1.4',
      category: '技术文档',
      language: '中文',
      pages: 38,
      downloads: 95,
      views: 367,
      tags: ['性能', '优化', '前端', '后端'],
      thumbnail: '/images/thumbnails/performance.svg',
      content: '性能优化指南总结了智汇宝项目的性能优化经验。前端优化包括代码分割、懒加载、图片优化、缓存策略等。后端优化包括数据库查询优化、接口响应时间优化、并发处理等。文档还介绍了性能监控工具的使用、性能指标的定义和性能测试方法。通过这些优化措施，系统的加载速度和响应速度都得到了显著提升。'
    },
    {
      id: 12,
      title: '测试规范文档',
      description: '单元测试、集成测试和E2E测试规范',
      type: 'document',
      format: 'PDF',
      size: '1.7 MB',
      author: '周八',
      createdAt: '2024-01-14',
      lastModified: '2024-01-21',
      version: 'v1.6',
      category: '技术文档',
      language: '中文',
      pages: 35,
      downloads: 82,
      views: 298,
      tags: ['测试', '规范', '质量保证', '技术'],
      thumbnail: '/images/thumbnails/testing.svg',
      content: '测试规范文档定义了智汇宝项目的测试标准和流程。前端使用Jest和React Testing Library进行单元测试，使用Cypress进行E2E测试。后端使用Mocha和Chai进行单元测试和集成测试。文档规定了测试覆盖率要求、测试用例编写规范、Mock数据使用方法等。所有新功能必须编写相应的测试用例，确保代码质量。'
    }
  ]

  const categories = [
    { id: 'all', label: '全部', icon: Archive },
    { id: 'document', label: '文档', icon: FileText },
    { id: 'image', label: '图片', icon: Image },
    { id: 'video', label: '视频', icon: Video },
    { id: 'audio', label: '音频', icon: Music }
  ]

  const getTypeIcon = (type) => {
    switch (type) {
      case 'document': return FileText
      case 'image': return Image
      case 'video': return Video
      case 'audio': return Music
      default: return Archive
    }
  }

  const filteredResources = resources.filter(resource => {
    const matchesSearch = resource.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         resource.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         resource.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
    const matchesCategory = selectedCategory === 'all' || resource.type === selectedCategory
    return matchesSearch && matchesCategory
  })

  const sortedResources = [...filteredResources].sort((a, b) => {
    switch (sortBy) {
      case 'name':
        return a.title.localeCompare(b.title)
      case 'date':
        return new Date(b.createdAt) - new Date(a.createdAt)
      case 'size':
        return parseFloat(b.size) - parseFloat(a.size)
      case 'downloads':
        return b.downloads - a.downloads
      default:
        return 0
    }
  })

  return (
    <div className="resource-library">
      <div className="library-header">
        <div className="header-content">
          <div className="header-title">
            <h1>资源库</h1>
            <div className="header-stats">
              <span className="stat-item">
                <span className="stat-number">{resources.length}</span>
                <span className="stat-label">个资源</span>
              </span>
              <span className="stat-divider">•</span>
              <span className="stat-item">
                <span className="stat-number">{filteredResources.length}</span>
                <span className="stat-label">显示中</span>
              </span>
            </div>
          </div>
          <p className="header-description">管理和浏览所有资源文件，支持多种格式和分类</p>
        </div>
        <div className="header-actions">
          <Link to="/resource-import" className="import-btn">
            <Plus size={20} />
            导入资源
          </Link>
        </div>
      </div>

      <div className="library-controls">
        <div className="controls-row">
          <div className="search-section">
            <div className="search-box">
              <Search size={20} />
              <input
                type="text"
                placeholder="搜索资源名称、描述或标签..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
              {searchTerm && (
                <button 
                  className="clear-search"
                  onClick={() => setSearchTerm('')}
                >
                  ×
                </button>
              )}
            </div>
          </div>

          <div className="view-controls">
            <div className="view-toggle">
              <button
                className={`view-btn ${viewMode === 'grid' ? 'active' : ''}`}
                onClick={() => setViewMode('grid')}
                title="网格视图"
              >
                <Grid size={18} />
              </button>
              <button
                className={`view-btn ${viewMode === 'list' ? 'active' : ''}`}
                onClick={() => setViewMode('list')}
                title="列表视图"
              >
                <List size={18} />
              </button>
            </div>
          </div>
        </div>

        <div className="filter-section">
          <div className="category-filter">
            <div className="filter-label">分类筛选：</div>
            <div className="category-buttons">
              {categories.map(category => {
                const Icon = category.icon
                return (
                  <button
                    key={category.id}
                    className={`category-btn ${selectedCategory === category.id ? 'active' : ''}`}
                    onClick={() => setSelectedCategory(category.id)}
                  >
                    <Icon size={18} />
                    {category.label}
                  </button>
                )
              })}
            </div>
          </div>

          <div className="sort-section">
            <div className="sort-label">排序方式：</div>
            <select
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value)}
              className="sort-select"
            >
              <option value="name">按名称</option>
              <option value="date">按日期</option>
              <option value="size">按大小</option>
              <option value="downloads">按下载量</option>
            </select>
          </div>
        </div>
      </div>

      <div className="resources-container">
        {sortedResources.length === 0 ? (
          <div className="empty-state">
            <Archive size={64} />
            <h3>暂无资源</h3>
            <p>没有找到符合条件的资源</p>
            <Link to="/resource-import" className="import-btn">
              <Plus size={20} />
              导入第一个资源
            </Link>
          </div>
        ) : (
          <div className={`resources-grid ${viewMode}`}>
            {sortedResources.map(resource => {
              const TypeIcon = getTypeIcon(resource.type)
              return (
                <Link key={resource.id} to={`/resource/${resource.id}`} className="resource-card">
                  <div className="resource-thumbnail">
                    <img src={resource.thumbnail} alt={resource.title} />
                    <div className="resource-type">
                      <TypeIcon size={18} />
                      <span>{resource.format}</span>
                    </div>
                    <div className="resource-overlay">
                      <div className="overlay-actions">
                        <button
                          className="overlay-btn"
                          title="下载"
                          onClick={(e) => {
                            e.preventDefault()
                            e.stopPropagation()
                            // 处理下载逻辑
                          }}
                        >
                          <Download size={24} />
                        </button>
                        <button
                          className="overlay-btn"
                          title="分享"
                          onClick={(e) => {
                            e.preventDefault()
                            e.stopPropagation()
                            // 处理分享逻辑
                          }}
                        >
                          <Share2 size={24} />
                        </button>
                      </div>
                    </div>

                    <div className="resource-info">
                      <h3 className="resource-title">{resource.title}</h3>
                      <div className="resource-stats">
                        <div className="stat-item">
                          <Eye size={18} />
                          <span>{resource.views}</span>
                        </div>
                        <div className="stat-item">
                          <Download size={18} />
                          <span>{resource.downloads}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </Link>
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}

export default ResourceLibrary
